<template>
  <div class="order">
      <div class="address" v-if="address.name" @click="toAddressList">
          <div class="address-item">
              <div>
                  <div class="address-list">
                      <div>
                          <span>{{address.name}}</span>
                          <div class="default">默认</div>
                      </div>
                      <div class="info">
                          <p>{{address.mobile}}</p>
                          <p>{{address.address+address.address_detail}}</p>
                      </div>
                      <div class="three"></div>
                  </div>
              </div>
          </div>
      </div>
      <div class="select-address" v-else @click="toAdd">请选择默认收货地址</div>

      <div class="orderbox">
          <div class="orderbox-item">
              <div>商品合计</div>
              <div>￥{{allPrice}}</div>
          </div>
          <div class="orderbox-item">
              <div>运费</div>
              <div>免运费</div>
          </div>
          <div class="orderbox-item">
              <div>优惠券</div>
              <div>暂无</div>
          </div>
      </div>

      <div class="cartlist">
          <div class="cartlist-item"
           v-for="(item,index) in listData" :key="index">
              <div class="cartlist-content">
                  <div class="content-left">
                      <div class="left-img">
                          <img :src="item.list_pic_url" />
                      </div>
                      <div class="left-info">
                          <p>{{item.goods_name}}</p>
                          <p>￥{{item.retail_price}}</p>
                      </div>
                  </div>
                  <div class="content-right">
                      <div class="right-num">x{{item.number}}</div>
                  </div>
              </div>
          </div>
      </div>

      <div class="footer">
          <div>实付: ￥{{allPrice}}</div>
          <div class="pay" @click="pay">支付</div>
      </div>
  </div>
</template>

<script>
import { get, getStorageOpenid } from '../../utils'
export default {
    data() {
        return {
            address: {},
            allPrice: '',
            openId: '',
            addressId: '',
            listData: []
        }
    },
    // 小程序中的生命周期方法: 用户监听页面显示(页面初次渲染时获取数据, 相当于mounted)
    onShow () {
        if (wx.getStorageSync('addressId')) {
        this.addressId = wx.getStorageSync('addressId')
        }
        this.openId = getStorageOpenid()
        this.allPrice = ''   // 跳转页面产生缓存 故在这里添加初始化
        this.getDetail()
    },
    methods: {
        toAddressList() {
            wx.navigateTo({
                url:'/pages/addressSelect/main'
            })
        },
        toAdd() {
            wx.navigateTo({
                url:'/pages/addaddress/main'
            })
        },
        async getDetail() {
            const data = await get('/order/detailAction', {
                openId: this.openId,
                addressId: this.addressId,
            })
            if(data) {
                this.listData = data.goodsList
                this.address = data.address
            }
            // console.log(data);
            // 合计金额
            this.listData.map((item) => {
                this.allPrice = Number(item.retail_price * item.number) + Number(this.allPrice)
            })
        },
        pay() {
            wx.showToast({
                title: '支付功能暂未开发',
                icon: 'none',
                duration: 1500,
                mask: false,
                success: res => {}
            })
        }
    }
}
</script>

<style scoped>
@import './style.css';
</style>